<template>
  <div class="mobile5-box">

      <my-header :title="title"></my-header>

    <div class="header">
      <img src="../../../assets/image/mobile10/mobile10-1.jpg" alt>
      <img src="../../../assets/image/mobile10/mobile10-2.jpg" alt>
      <img src="../../../assets/image/mobile10/mobile10-3.jpg" alt>
      <img src="../../../assets/image/mobile10/mobile10-4.jpg" alt>
    </div>

    <div class="content">
      <div class="content1">
        <img src="../../../assets/image/mobile10/mobile10-5.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
      </div>
      <div class="content2">
        <img src="../../../assets/image/mobile10/mobile10-6.jpg" alt>
        <div class="content1-list" v-for="value in moblie5List1" :key="value.productCode">
            <router-link :to="'/product/' + value.productCode">
                <div class="list">
                    <div class="list-left">
                        <img :src="value.productImageUrl" alt="">
                    </div>
                    <div class="list-right">
                        <p class="list-text">{{ value.productName }}</p>
                        <p class="list-price">
                            <span class="price-left">
                                <em>￥</em>
                                {{ value.productPrice/100 + '.00' }}
                            </span>
                            <span class="price-right">立即购买</span>
                        </p>
                    </div>
                </div>
            </router-link>
        </div>
      </div>

      <div class="content3">
        <img src="../../../assets/image/mobile10/mobile10-7.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List2" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import imgUrl1 from '../../../assets/image/mobile5/mobile5-1.jpg'
import myHeader from 'Components/common/myHeader.1'

import {mapActions, mapGetters} from 'vuex'
export default {
    components: {
        myHeader
    },
    data () {
        return {
            moblie5List: [],
            moblie5List1: [],
            moblie5List2: [],
            moblie5List3: [],
            moblie5List4: [],
            moblie5List5: [],
            title: '病例介绍',
        }
    },
    methods: {
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('2773,10838,6546,170191,11831,1502');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('174256,16281,1522');
        this.moblie5List1 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('15629,11887,3393,11883,15667,8392');
        this.moblie5List2 = this.getMobile5s && this.getMobile5s || [];

        // 改变背景颜色
        document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        document.querySelector('.van-icon').style.color = '#ffffffcc';
        document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        document.querySelector('.van-hairline--bottom').style.background = '#54A5F4';
        document.querySelector('.van-hairline--bottom').style.opacity = '0.9'
        
    }
};
</script>

<style lang="scss" scoped>
body {
  background-color: rgb(216, 244, 255);
  color: #333;
}

img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
a {
    color: #333;
}

.recommend-list {
    display: flex;
    flex-wrap: wrap;    
    background-color: rgb(216, 244, 255);
    padding: 0.19rem 0.08rem;
    .rl-item {
        padding: .05rem;
        width: 50%;
        box-sizing: border-box;
        .wrap {
            background-color: #fff;
            padding: .1rem;
            border-radius: .1rem;
            img {
                width: 100%;
                height: auto;
                margin-bottom: 0.05rem;
            }
            span {
                display: block;
            }
            .name {
                font-size: .14rem;
                height: .21rem; 
                line-height: .21rem;  
                // ellipsis(); 
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 1.731rem;
            }
            .info {
                color: #999;
                font-size: .12rem;
                height: .18rem;    
                // ellipsis();
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 1.5rem;
            }
            .list-price {
                display: flex;
                justify-content: space-between;
                padding-top: .1rem;
                .price-left {
                    font-size: .15rem;
                    display: flex;
                    align-items: center;
                    em {
                        font-size: .1rem;
                    }
                }
                .price-right {
                    padding: .06rem .1rem;
                    border-radius: .2rem;
                    background: #f53b10;
                    color: #fff;
                    font-size: .14rem;
                }
            }
        }
    }
}

.content1-list {
    padding: .1rem;
    background: rgb(216, 244, 255);
    .list {
        display: flex;
        padding: .15rem;
        background: #fff;
        align-items: center;
        .list-left {
            flex: 110;
            img {
                width: 1.3rem;
                height: 1.3rem;
            }
        }
        .list-right {
            flex: 265;
            // margin-left: -1px;
            padding-left: .1rem;
            line-height: 1.5;
            .list-text {
                white-space: pre-wrap;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

                font-size: 16px;
                color: #f53b10;
                margin-bottom: 5px;
            }
            .list-price {
                display: flex;
                justify-content: space-between;
                padding-top: .3rem;
                .price-left {
                    font-size: .16rem;
                    display: flex;
                    align-items: flex-end;
                    em {
                        font-size: .12rem;
                    }
                }
                .price-right {
                    padding: .06rem .1rem;
                    border-radius: .2rem;
                    background: #f53b10;
                    color: #fff;
                    font-size: .14rem;
                }
            }
        }
    }
}
</style>


